<template>
	<view>
		<u-popup bgColor="transparent" mode="center" :show="show" @close="close" :closeable="true">
	            <view class="regBlock">
					<view class="regTitle">
						找回密码
					</view>
	                <view style="width: 650rpx;margin-top: 30rpx;display: flex;flex-direction: column;align-items: center;">
	                	<u-form labelWidth="200rpx" :labelStyle="{ color: '#FFFFFF', fontSize: '30rpx',opacity:'0.6' }"
	                		labelPosition="top" :model="userInfo" :rules="rules" ref="uForm">
	                		<u-form-item label="手机号" prop="mobile" ref="item1">
	                			<view class="ipt">
	                				<u-input maxlength="11" fontSize="32rpx" color="#FFFFFF" placeholderClass="placeholderClass"
	                					placeholder="请输入手机号" border="none" v-model="userInfo.mobile"></u-input>
	                			</view>
	                		</u-form-item>
							<u-form-item label="验证码" prop="smsCode" ref="item1">
								<view class="ipt">
									<u-input maxlength="6"  fontSize="32rpx" color="#FFFFFF"
										placeholderClass="placeholderClass" placeholder="请输入验证码" border="none"
										v-model="userInfo.smsCode">
										<view slot="suffix" >
											<view v-if="codeType==0" style="color: #1DA779;" @click="handleCode">获取验证码</view>
											<view v-if="codeType==1" style="color: #1DA779;">发送中...</view>
											<view v-if="codeType==2" style="color: #CFCFCF;">{{countdown}}s</view>
										</view>
									</u-input>
									
								</view>
							</u-form-item>
	                		<u-form-item label="新密码" prop="password" ref="item1">
	                			<view class="ipt">
	                				<u-input type="password" fontSize="32rpx" color="#FFFFFF"
	                					placeholderClass="placeholderClass" placeholder="请输入密码" border="none"
	                					v-model="userInfo.password"></u-input>
	                			</view>
	                		</u-form-item>
							<u-form-item label="确认新密码" prop="newPassword" ref="item1">
								<view class="ipt">
									<u-input type="password" fontSize="32rpx" color="#FFFFFF"
										placeholderClass="placeholderClass" placeholder="请再次输入密码" border="none"
										v-model="userInfo.newPassword"></u-input>
								</view>
							</u-form-item>
							
							
	                	</u-form>
	                	<view style="margin-top: 30rpx;">
	                		<u-button :custom-style="customStyleBtn1" @click="submit" :loading="loading">
								<image src="/static/refresh.png" mode="widthFix" style="width: 30rpx;margin-right: 10rpx;"></image>
								重置密码
							</u-button>
	                	</view>
	                </view>
	            </view>
			</u-popup>
		</view>
</template>

<script>
	import {missPassword,smsMobileCode} from '@/api/login.js'
	export default{
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return{
				countdown: 60, // 设置倒计时初始值
				isCounting: false, // 是否正在倒计时
				timer: null, // 用于存储计时器
				codeType: 0,
				loading:false,
				rules: {
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],
					smsCode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
					newPassword: [{
						required: true,
						message: '请输入确认密码',
						trigger: ['blur', 'change']
					}]
				},
				customStyleBtn1: {
					width: '616rpx',
					height: '96rpx',
					borderRadius: '30rpx',
					background: 'linear-gradient(to right, #704BF7, #0CECA6)',
					fontSize: '33rpx',
					fontWeight: 800,
					color: '#FFFFFF',
					border: 'none',
					lineHight: '50rpx !important',
					letterSpacing: '1px',
					isEye: false
				},
				
				userInfo:{
					mobile:'',
					newPassword:'',
					password:'',
					smsCode:'',
				}
			}
		},
		methods:{
			submit(){
				this.$refs.uForm.validate().then(async res => {
					if(this.userInfo.password != this.userInfo.newPassword){
						uni.showToast({
							title:'重置密码不同请检查',
							icon:'none',
							duration: 3000
						})
						return
					}
					try {
						this.loading = true
						let loginRes  = await missPassword(this.userInfo)
						this.loading = false
						uni.showToast({
							title:'操作成功',
							icon:'none'
						})
						this.close()
					} catch (error) {
						this.loading = false
					}
					
				}).catch(errors => {})
			},
			// 获取验证码
			handleCode() {
				if(!this.userInfo.mobile){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					retrun
				}
				this.codeType = 1
				if (this.isCounting) return;
				this.getCode()
			},
			// 获取验证码
			async getCode() {
				try {
					const res = await smsMobileCode({
						mobile: this.userInfo.mobile,
						type:2
					})
					this.isCounting = true; // 设置为正在倒计时状态
					this.timer = setInterval(() => {
						this.codeType = 2
						if (this.countdown <= 0) {
							this.codeType = 0
							clearInterval(this.timer); // 清除定时器
							this.isCounting = false;
							this.countdown = 60; // 重置倒计时
						} else {
							this.countdown--;
						}
					}, 1000);
				} catch (error) {
					this.codeType = 0
					//TODO handle the exception
				}
				
			},
			close(){
				this.$emit('success')
			}
		}
	}
</script>

<style scoped>
	.ipt {
		width: 616rpx;
		height: 100rpx;
		border-radius: 30rpx;
		background-color: #22304D;
		border: 4rpx solid #313F5A;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.regTitle{
		width: 616rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: #FFFFFF;
		font-size: 35rpx;
		font-weight: 800;
	}
	.regBlock{
		width: 710rpx;
		min-height: 1000rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 30rpx 40rpx 30rpx;
		box-sizing: border-box;
		background-color: #091836;
		border-radius: 30rpx;
		
	}
</style>